<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}

			ul {
				border: solid pink 1px;
				width: 300px;
				height: 300px;
				margin: 100px;
			}

			li {
				height: 40px;
				color: #ffffff;
				width: 40px;
				background-color: pink;
				line-height: 40px;
				text-align: center;
				/* margin: 10px; */
			}

			/* 
			一.flex 布局
			 1. display: flex; 	块级元素指定为 Flex 布局
			 2.	display: inline-flex;	行内元素指定为 Flex 布局
			 3.  display: -webkit-flex; Webkit 内核的浏览器，必须加上-webkit前缀。
			 ****注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
			 
			二.以下6个属性设置在父容器上。
			1. flex-direction: 排列方向;
				 row （默认值） 水平方向 1~10   
				 row-reverse 水平方向 10~1
				 column 垂直方向 1~10
				 column-reverse 垂直方向 10~1
				 
			2. flex-wrap: 如何换行;
				 nowrap （默认值） 不换行
				 wrap 换行 1~10 第一行在上方
				 wrap-reverse 换行 10~1 第一行在下方
			
			3. flex-flow: <flex-direction> || <flex-wrap>;两个方法的简写
				 flex-flow: row wrap;  
			
			4. justify-content: 主轴上的对齐方式; X轴
				 flex-start （默认值） 左对齐
				 flex-end 右对齐
				 center 居中
				 space-between 两端对齐
				 space-around 两侧的间隔
			
			5. align-items: 交叉轴上如何对齐; Y轴 但是中间会有空隙
				 flex-start 上对齐
				 flex-end 下对齐
				 center 中对齐
				 baseline 第一行文字的基线对齐
				 stretch （默认值）： 未设置高度或设为auto，将占满整个容器的高度
				 
			6, align-content:交叉轴上如何对齐; Y轴 但是中间没有空隙
					flex-start 上对齐
					flex-end 下对齐
					center 中对齐
					space-between 上下靠边,边上没空隙
					space-around 上下靠边,边上有空隙
					stretch （默认值）： 轴线占满整个交叉轴。
					
			三.以下6个属性设置在子容器上。
			1. order属性定义子元素的排列顺序。数值越小，排列越靠前，默认为0。相当于子元素排序权值
			2. flex-grow属性定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大。会霸占所有X轴的空余空间
			3. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
			4. flex-basis属性定义了在分配多余空间之前,值为0的时候会缩小到内容大小
			5. flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
			6. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
			 */

			/* 父元素 */
			.ul {
				display: flex;
				/* flex-direction: row;
				flex-wrap: wrap ; */
				flex-flow: row wrap;
				justify-content:space-between;
				/* align-items: stretch;
				align-content: stretch  ; */
				
			}

			/* 子元素 */
			.li2 {
				/* order: 10; */
				flex-grow:2;
			}
			
			.li4 {
				background-color: red;
				/* flex-grow:2; */
				order: 5;
				/* flex-shrink: 0; */
				/* flex-basis: 0; */
				flex: 1;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<ul class="ul">
			</ul>
		</div>
		<script type="text/javascript">
			let ul = document.querySelector('.ul');

			let lis = '';
			for (var i = 0; i < 9; i++) {
				let li = "<li class='li"+i+"'>" + i + "</li>"
				lis += li
			}
			ul.innerHTML = lis;
		</script>
	</body>
</html>
